<template>
  <section class='f-success'>
    <img class="f-mt-30 f-mb-30" style="width:147px;height:120px" src="@/assets/imgs/icon_order_accepted.png" alt="">
    <p style="font-size: 19px;color: #010101;">支付成功!</p>
    <div class="f-btn-box">
      <van-button round block type="primary" color="#488BFE" @click="toDetail()">查看订单</van-button>
      <van-button class="f-mt-30" round block plain type="primary" color="#488BFE" @click="goBack">回到首页</van-button>
    </div>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({})

    onMounted(() => {
      store.commit("setNavBar", {
        title: '支付成功',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });
    })

    const goBack = () => {
      router.replace('/home')
    }

    const toDetail = () => {
      router.replace({
        path: "/order/detail",
        query: {
          sysOrderId: route.query.sysOrderId,
          queryType: 1
        }
      })
    }

    return {
      ...toRefs(state),
      goBack,
      toDetail
    }
  }
}
</script>
<style lang='scss' scoped>
.f-success {
  text-align: center;
  .f-btn-box {
    margin-top: 48px;
    padding: 0 62px;
  }
}
</style>